<template>
	<w-container style="background-color: #EFF2F8;" :loading="isLoading" >
		<w-navbar id="navbarStyle" title="邀请好友" :placeholder="true" bgColor="#EFF2F8"></w-navbar>
		<!-- <view class="font-size-28 font-color-black font-w-500 ml-13 mt-16">邀请好友</view> -->
		<!-- 规则 -->
		<!-- <view class="rule_btn" @click="$u.route('/pages/rules/rules',{ type:1 })">
			<w-image v-if="info.sharerulebtn" :src="info.sharerulebtn" width="92" height="35"></w-image>
		</view> -->
		<!-- 邀请二维码 -->
		<!-- <view class="code_con" :style="getStyle('code_con')">
			<image :src="invitaion_code" class="img"></image>
		</view> -->
		<!-- 邀请记录 -->
		<recordList @share="draw"></recordList>
		<!-- 版权图片 -->
		<!-- <view class="copyright_con">
			<w-image v-if="info.copyright" :src="info.copyright" width="195" height="32" mode="widthFix"></w-image>
		</view> -->
		<w-copyright></w-copyright>
		<!-- 保存按钮 -->
		 <!-- <view class="save_btn" :style="getStyle('save_btn_bg')">
			<view @click="copyInviteUrl">
				<w-icon name="copy" size="18"></w-icon>
				<text>{{handleLang('复制链接')}}</text>
			</view>
			<view @click="draw">
				<w-icon name="download" size="18"></w-icon>
				<text>{{handleLang('保存图片')}}</text>
			</view>
		</view> -->
		
		<view style="position: fixed;z-index: -1000;">
			<w-canvas :isDraw="isDraw" :canvasData="canvasData" :imageSize="{width: 343, height: 526}" @generateImageSuccessful="drawAccomplish"></w-canvas>
		</view>
		
		<!-- 分享海报 -->
		<!-- <invitaionPoster v-model="showPoster" :invitaion_code="invitaion_code" :poster_bg="getStyle('poster_bg')"></invitaionPoster> -->
		<sharePoster v-model="showPoster" :posterImg="posterImg"></sharePoster>
	</w-container>
</template>

<script>
	import { mapGetters,mapState } from 'vuex';
	import { getConfig } from '@/api/common';
	import { base64ToPath } from 'image-tools';
	import { ApiHost } from '@/config/index.js';
	import recordList from './components/recordList.vue';
	import invitaionPoster from './components/invitaionPoster.vue';
	import sharePoster from './components/sharePoster.vue';
	import { H5Url } from "@/config/index.js"
	export default {
		data() {
			return {
				isDraw:false,
				canvasData:[],
				H5Url,
				isLoading: true,
				showPoster: false,
				info: {
					sharebg:'',
					sharebtn1:'',
					copyright:'',
					sharerulebg:'',
					sharerulebtn:'',
					share_bac_iamge:'',
					invitation_bg_color:''
				},
				
				posterImg:''
			};
		},
		components:{ recordList,invitaionPoster,sharePoster },
		computed: {
			...mapGetters('user',['isLogin', 'userInfo']),
			// 邀请二维码
			invitaion_code() {
				
				let time = new Date().getTime();
				// 当前页面路径
				let curRoute=getCurrentPages()
				let fullUrl='/\#'+curRoute[curRoute.length-1].$page.fullPath
				
				//
				let url=`${ApiHost}/addons/qrcode/index/build?text_type=h5&text=${this.userInfo.inviter_code}&t=${time}&url=${encodeURIComponent(fullUrl)}`
	
				return url
			},
			...mapState('config',{
				h5_invite_url(state){
					// return `${state.info.h5_invite_url}&content=${this.userInfo.inviter_code}`
					return `${this.H5Url}/#/pages/login/register?a=1&content=${this.userInfo.inviter_code}`
				}
			})
		},
		created() {
			this.init()
		}, 
		methods:{
			
			// 复制邀请码
			copyInviteUrl() {
				uni.setClipboardData({
					data: this.h5_invite_url,
					success: function () {
						console.log('success');
					}
				});
			},
			
			// 页面背景
			getStyle(key) {
				let { invitation_bg_color,share_bac_iamge,sharerulebg,sharebtn1,sharebg } = this.info;
				let arry = {
					'invitation_bg_color':{ 'background-color':invitation_bg_color },
					'code_con':{ 'background-image': `url(${ this.$ossUrl + sharebg })` },
					'record_con': { 'background-image': `url(${ this.$ossUrl + sharerulebg })` },
					'save_btn_bg':{ 'background-image': `url(${ this.$ossUrl + sharebtn1 })` },
					'poster_bg':{ 'background-image': `url(${ this.$ossUrl + share_bac_iamge })` }
				}
				return arry[key]
			},
			
			// 初始化配置数据
			init() {
				let keys = [
					'sharebg',
					'copyright',
					'sharebtn1',
					'sharerulebtn',
					'sharerulebg',
					'share_bac_iamge',
					'invitation_bg_color'
				]
				getConfig(keys.join(',')).then(res => {
					this.isLoading = false
					this.info = res.data
					res.data.copyright && (this.info.copyright = JSON.parse(res.data.copyright)[0].img)
				}).catch(()=>{ this.isLoading = false })
			},
			
			// 绘制
			draw(code){
				if(this.posterImg){
					this.drawAccomplish(this.posterImg)
					return
				}
				uni.showLoading({ title:this.handleLang('绘制中...') })
				this.isDraw = true;
				let bgImg = this.$ossUrl + this.info.share_bac_iamge;
				let codeImg = this.invitaion_code;
				this.canvasData = [
					{ type: 'rect', attr: { color: 'transparent', x: 0, y: 0, width: 335, height: 530 } },
					{ type: 'image', attr: { image: bgImg, x: 0, y: 0, width: 335, height: 530 } },
					{ type: 'image', attr: { image: codeImg, x: 49, y: 160, width: 240, height: 240 } },
				]
			},
			
			//绘制完成
			drawAccomplish(url) {
				if(!this.posterImg) uni.hideLoading();
				this.posterImg = url;
				this.showPoster = true;
				
				//#ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					if (ua.indexOf('micromessenger') != -1){
						uni.$u.toast(this.handleLang('长按保存到系统相册'))
						return
					}
					let a = document.createElement('a')
					a.setAttribute('download', "")
					a.setAttribute('href', url)
					document.body.appendChild(a);
					a.style.display = 'none'
					a.click()
					document.body.removeChild(a)
					uni.$u.toast(this.handleLang('图片已保存到系统相册'))
				//#endif
				//#ifndef H5
					uni.saveImageToPhotosAlbum({
						filePath: url,
						success() {
							uni.$u.toast(this.handleLang('图片已保存到系统相册'))
						},
						fail(err){
							console.log(err)
						}
					})
				//#endif
			}
		}
	}
</script>
<style lang="scss">
	.page-bg {
		background-color: #EFF2F8;
	}
	#container{
		// background: url($IMG_URL + '/static/bg/yqhy_bg.png');
		// background-repeat: no-repeat;
		// background-size: 750rpx;
		// background-color: #F8F7F5 !important;
		// background: linear-gradient( 180deg, #D8EDFB 0%, #B0D7FA 100%);
		background: #EFF2F8;
		position: relative;
		padding-bottom: 250rpx;
		@extend .flex,.flex-dir-col,.flex-ai-center;
		
		.rule_btn{
			position: absolute;
			right: 0;
			top: calc(var(--status-bar-height) + 70rpx);
			z-index: 1;
		}
	}
	.invitaion_bgStyle{
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.code_con{
		width: 750rpx;
		height: 1250rpx;
		position: relative;
		@extend .invitaion_bgStyle;
		
		>.img{
			width: 280rpx;
			height: 280rpx;
			border-radius: 24rpx;
			position: absolute;
			left: calc(50% - 140rpx);
			// #ifdef APP-PLUS
			top: calc(730rpx); // 改过
			// #endif
			// #ifdef H5
			top: calc(env(safe-area-inset-top) + 730rpx); // 改过
			// #endif
			// top: calc(env(safe-area-inset-top) + 730rpx); // 改过
			display: block;
		}
	}
	.record_con{
		// margin-top: 48rpx;
		// width: 690rpx;
		// height: 918rpx;
		@extend .invitaion_bgStyle;
		
	}
	.copyright_con{
		height: 64rpx;
		margin-top: 24rpx;
	}
	.save_btn{
		// padding: 0 50rpx;
		// width: 536rpx;
		// height: 120rpx;
		// position: fixed;
		// left: calc(50% - 268rpx);
		// bottom: 80rpx;
		// @extend .invitaion_bgStyle,.flex;
		// >view{
		// 	width: 50%;
		// 	height: 100%;
		// 	@extend .flex-center;
		// 	>text{ margin-left: 10rpx;font-size: 24rpx;color: #fff; }
		// }
	}
</style>
